<template>
    <div >
      <div class="body">
      
          <!-- 日历  年月 -->
          <div class="hang">
            <!-- 年 -->
              <div class="hang">
                  <div class="tou">年份</div> 
                  <button v-for="item in nian" :class="[item==nianfen?'gaoliang':'shen']" @click="querennian(item)">{{item}}</button>
              </div>
            <!-- 月   -->
              <div class="hang" style="margin-left: 20px;">
                  <div class="tou">月份</div>
                  <div v-for="item in yue" :class="[item==yuefen?'gaoliang':'shen']" @click="querenyue(item)">{{item}}</div>
              </div>
          </div>
          <!-- 日期 -->
          <div class="hang" style="margin-top: 10px;">
            <div class="tou">
              日期
            </div>
            <button v-for="item in ri" :class="[item==riqi?'riqigaoliang':'riqishen']" @click="querenri(item)">{{item}}</button>
          </div>
      
      </div>
    </div>
  </template>
  
  <script>
  import analysis from "@/views/echarts/analysis";
  export default {
    name: "echarts",
    components: {
      analysis
    },
    data() {
      return {
        nian:[2019,2020,2021,2022,2023],
        yue:12,
        ri:'',
        nianfen:'',
        yuefen:'',
        riqi:'',
      }
    },
    // 监听年和月  确定当月天数
    computed: {
      listenChange () {
          let nian = this.nianfen
          let yue = this.yuefen
           return {nian,yue}
        }
    },  
    watch: {
      listenChange(val){
    const the31DaysMonths = [1, 3, 5, 7, 8, 10, 12]
    const the30DaysMonths = [4, 6, 9, 11]
    if (!the31DaysMonths.includes(val.yue) && !the30DaysMonths.includes(val.yue) &&
      (val.yue !== 2)
    ) {
      throw new TypeError('Invalid Month Number.')
    }
  
    if (the31DaysMonths.includes(val.yue)) { return this.ri=31 }
  
    if (the30DaysMonths.includes(val.yue)) { return this.ri=30 }
  
    // Check for Leap year
    if (val.nian % 4 === 0) {
      if ((val.nian % 100 !== 0) || (val.nian % 100 === 0 && val.nian % 400 === 0)) {
        return this.ri=29
      }
    }
  
    return this.ri=28
      }
  
    },
    created() {
      this.getdata()
      
    },
    methods: {
      // 点击获取年月日  可以传给父组件
      querennian(nian){
        this.nianfen=nian
      },
      querenyue(yue){
        this.yuefen=yue
      },
      querenri(ri){
        this.riqi=ri
      },
      // 进入页面直接显示当前的年月日  暂时最高2023  
      getdata(){
        var myDate = new Date();
        this.nianfen=myDate.getFullYear();
        this.yuefen=myDate.getMonth()+1;
        this.riqi=myDate.getDate();
      }
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .body{
   padding: 6px 15px;
   background-color: rgba(29, 46, 84, 0.5);
   border-radius: 0.6vw;
  }
  .hang{
    display: flex;
  
  }
  .tou{
  
    height: 1.6vw;
    width: 7vh;
    background-color: rgba(29, 46, 84, 0.5);
    border-radius: 3px;
    text-align: center;
    line-height: 1.6vw;
    color: #fff;
    cursor:pointer;
  }
  .shen{
    border: 0px;
    color: #fff;
    height: 1.6vw;
    width: 8vh;
    background-color: rgba(29, 46, 84, 0.5);
    border-radius: 3px;
    text-align: center;
    line-height: 1.6vw;
    margin-left: 10px;
    cursor:pointer;
  }
  .gaoliang{
    border: 0px;
    color: #fff;
    height: 1.6vw;
    width: 8vh;
    background-color: #3274ee;
    border-radius: 3px;
    text-align: center;
    line-height: 1.6vw;
    margin-left: 10px;
    cursor:pointer;
  }
  .riqishen{
    border: 0px;
    color: #fff;
    height: 1.6vw;
    width: 6vh;
    background-color: rgba(29, 46, 84, 0.5);
    border-radius: 3px;
    text-align: center;
    line-height: 1.6vw;
    margin-left: 10px;
    cursor:pointer;
  
  }
  .riqigaoliang{
    border: 0px;
    color: #fff;
    height: 1.6vw;
    width: 6vh;
    background-color: #3274ee;
    border-radius: 3px;
    text-align: center;
    line-height: 1.6vw;
    margin-left: 10px;
    cursor:pointer;
  
  }
  </style>
  